<template>
  <div class="age-sex-statistics">
    <div class="sex-block">
      <div class="sex-item">
        <img alt="" src="@/assets/images/sex-1.png" class="icon-block" >
        <div class="info-block">
          <div class="text">男49%</div>
          <div class="value-block">
            <div class="value">2,209</div>
            <div class="unit">人</div>
          </div>
        </div>
      </div>
      <div class="sex-item">
        <img alt="" src="@/assets/images/sex-2.png" class="icon-block" >
        <div class="info-block">
          <div class="text">女51%</div>
          <div class="value-block">
            <div class="value">2,296</div>
            <div class="unit">人</div>
          </div>
        </div>
      </div>
    </div>
    <div class="progress-item">
      <div class="text-block">
        <div class="text">18岁以下</div>
        <div class="percent">12.48%</div>
      </div>
      <div class="progress">
        <div class="main"></div>
        <div class="schedule" :style="getScheduleStyle(12.48)"></div>
        <div class="point" :style="getPointStyle(12.48)">
          <div class="circle"></div>
        </div>
      </div>
    </div>
    <div class="progress-item">
      <div class="text-block">
        <div class="text">18-60岁</div>
        <div class="percent">68.88%</div>
      </div>
      <div class="progress">
        <div class="main"></div>
        <div class="schedule" :style="getScheduleStyle(68.88)"></div>
        <div class="point" :style="getPointStyle(68.88)">
          <div class="circle"></div>
        </div>
      </div>
    </div>
    <div class="progress-item">
      <div class="text-block">
        <div class="text">61岁以上</div>
        <div class="percent">18.65%</div>
      </div>
      <div class="progress">
        <div class="main"></div>
        <div class="schedule" :style="getScheduleStyle(18.65)"></div>
        <div class="point" :style="getPointStyle(18.65)">
          <div class="circle"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'AgeSexStatistics',
  methods:{
    getPointStyle(value){
      return {
        left:`calc(${value}% - 13px)`
      }
    },
    getScheduleStyle(value){
      return {
        width:value+'%'
      }
    }
  }
}
</script>
<style scoped lang="scss">
$textShadow:0px 1px 11px rgba(27, 126, 242, 0.8);
$textShadow2:0px 1px 11px rgba(252, 36, 102, 0.8);;
.age-sex-statistics{
  width: 100%;
  height: 100%;
  padding-top: 10px;
  .sex-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-bottom: 20px;
    .sex-item{
      width: calc(50% - 10px);
      height: 80px;
      display: flex;
      align-items: center;
      .icon-block{
        width: 80px;
        height: 80px;
        margin-right: 20px;
      }
      .info-block{
        flex-grow: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px 0;
        .text{
          color: #fff;
          font-size: 14px;
        }
        .value-block{
          display: flex;
          align-items: center;
          .value{
            font-family: 冷酷体;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
            text-shadow: $textShadow;
            margin-right: 10px;
          }
          .unit{
            color: #fff;
            font-size: 14px;
          }
        }
      }
      &:nth-child(2){
        .value-block{
          .value{
            text-shadow: $textShadow2;
          }
        }
      }
    }
  }
  .progress-item{
    width:100%;
    height:45px;
    padding: 0 20px;
    margin-bottom: 10px;
    .text-block{
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      .text{
        color: #fff;
        font-size: 14px;
        flex-grow: 1;
      }
      .percent{
        color: #fff;
        font-size: 14px;
      }
    }
    .progress{
      width: 100%;
      height: calc(100% - 20px);
      position: relative;
      $progressHeight:10px;
      .main{
        width: 100%;
        height: $progressHeight;
        background: #202A39;
        position: absolute;
        transform: translate(-50%,-50%);
        left: 50%;
        top: 50%;
      }
      .schedule{
        height: $progressHeight;
        position: absolute;
        transform: translate(0,-50%);
        left: 0;
        top: 50%;
        background: linear-gradient(to right,$fontColorSecondary,$fontColorMain);
      }
      .point{
        height: 26px;
        width: 26px;
        background: #051526;
        border: 1px solid $fontColorSecondary;
        position: absolute;
        transform: translate(0,-50%);
        border-radius: 50%;
        left: 0;
        top: 50%;
        .circle{
          width: $progressHeight;
          height: $progressHeight;
          background: $fontColorMain;
          border-radius: 50%;
          position: absolute;
          transform: translate(-50%,-50%);
          left: 50%;
          top: 50%;
        }
      }
    }
  }
}
</style>
